import React, { useEffect, useState, useRef } from 'react'
import { Row, Col, Form, Input, Button, Modal, Typography, Select, Table, Tag, Space, Popconfirm, Tooltip } from "antd"
import { UploadOutlined, DownloadOutlined, FormOutlined, DeleteOutlined, FolderViewOutlined } from '@ant-design/icons';


const { Title } = Typography


const { Column, ColumnGroup } = Table;


export default function shuffling() {



    const gotoAnnoDetail = () => {

    }

    const gotoEditAnno = () => {

    }
    const confirm = () => {

    }
    return (
        <div style={{ height: "100%" }}>
            <Title level={2} style={{ color: "rgba(255,255,255,1)" }}>轮播管理</Title>
            <Row>
                <Col>
                    <Button type="primary">新增</Button>
                </Col>
            </Row>
            <Row style={{ marginTop: 30 }}>
                <Col span={20}>
                    <Table
                        // dataSource={annoList}
                        sticky
                        bordered
                        id="table"
                        pagination={{ pageSize: 6 }}
                        rowKey={(item: any) => item._id}
                    >

                        <Column
                            title="#"
                            align='center'
                            render={(text, item, index) => (
                                <b>{index + 1}</b>
                            )}
                        />
                        <Column title="公告名称" align='center' dataIndex="title" key="title"
                            render={(text) => (
                                <b>{text}</b>
                            )}
                        />
                        <Column title="发布人" align='center' dataIndex="userInfo" key="userInfo"
                            render={(text) => (
                                <b>{text.username}</b>
                            )}
                        />
                        <Column
                            title="操作"
                            align='center'
                            render={(text, item: any, index: any) => (
                                <div>
                                    <Popconfirm
                                        title="你真的要删除吗?"
                                        onConfirm={() => confirm()}
                                        okText="确定"
                                        cancelText="不了"
                                    >
                                        <Button danger shape="circle" icon={<DeleteOutlined />} size="small" />
                                    </Popconfirm>
                                    <Tooltip placement="top" title={'编辑'} >
                                        <Button type="primary" onClick={() => gotoEditAnno()} shape="circle" icon={<FormOutlined />} size="small" />
                                    </Tooltip>


                                </div>
                            )}
                        />


                    </Table>
                </Col>
            </Row>


        </div>
    )
}
